import getSongsByTitle from "@/actions/getSongsByTitle";

import Header from '@/components/Header';
import SearchInput from "@/components/SearchInput";
import SearchContent from "./components/SearchContent";

interface SearchProps {
  searchParams: {
    title: string;
  }
}

export const revalidate = 0;

const Search = async({ searchParams }: SearchProps) => {
  const songs = await getSongsByTitle(searchParams.title);

  return (
    // 右侧内容区域盒子
    <div className="
      bg-neutral-800
      rounded-lg
      h-full
      w-full
      overflow-hidden
      overflow-y-auto
    ">
      {/* 标题区域 */}
      <Header className="
        from-bg-neutral-900
      ">
        <div className="
          mb-2
          flex
          flex-col
          gap-y-6
        ">
          {/* 标题 */}
          <h1 className="text-white text-3xl font-semibold">Search</h1>
          <SearchInput />
        </div>
      </Header>
      {/* 内容区域 */}
      <SearchContent 
        songs={songs}
      />
    </div>
  )
}

export default Search;